<template>
  <el-main class="main-panel-all" @drop="dragHandle" @dragover="dragOver">
    <div ref="myDivRef" style="width: 100%; height: 100%">
      <template v-for="(item, index) in useDragEditStore.componentList">
        <edit-shape-box
            :data-id="item.id"
            :index="index"
            :item="item"
            @click="handleCheck(item)"
            @mousedown="handlerMouseDown($event, item)"
        >
          <component
              :is="item.component"
              style="position: absolute"
              :style="{ left: item.attr.x + 'px', top: item.attr.y + 'px' }"

          ></component>
        </edit-shape-box>

      </template>
    </div>
  </el-main>
</template>

<script lang="ts" setup>
  import { componentConfigType } from '@/packages';
import { useDragEdit } from '@/pinia/modules/dragStore'
  import { throttle } from 'lodash'
  import editShapeBox from './components/Shape/index.vue'
  const myDivRef = ref<HTMLElement>()
  const useDragEditStore = useDragEdit()
  const dragOver = (e: DragEvent) => {
    e.preventDefault()
  }
  onMounted(() => {})

  const dragHandle = (e: any) => {
    e.preventDefault()
    const dragDataString = e!.dataTransfer!.getData('buttonConfig')
    const referenceBound = myDivRef.value?.getBoundingClientRect() || { x: 0, y: 0 }
    const componentData: componentConfigType = {
      component: dragDataString,
      attr: {
        x: e.clientX - referenceBound?.x - 30,
        y: e.clientY - referenceBound.y,
        width: 100,
        height: 50,
        zIndex: 0,
        offsetX: 0,
        offsetY: 0
      },
      id: 'xxxx'
    }
    useDragEditStore.addComponentList(componentData)
}
const handleCheck = (item: any) => {
  useDragEditStore.setCurrentComponent(item)
  }


  const handlerMouseDown = (e: any, item: any) => {
    e.preventDefault();
    e.stopPropagation();

    useDragEditStore.setCurrentComponent(item);
    const prevComponentInstance = useDragEditStore.getTargetChart;
    if (!prevComponentInstance) return;

    const startX = e.clientX;
    const startY = e.clientY;
    const { x: initX, y: initY } = prevComponentInstance.attr;
    const scale =  1;

    // 节流版的 mousemove 处理
    const mousemove = throttle((moveEvent: MouseEvent) => {
      const offsetX = (moveEvent.clientX - startX) / scale;
      const offsetY = (moveEvent.clientY - startY) / scale;

      prevComponentInstance.attr = {
        ...prevComponentInstance.attr,
        x: Math.round(initX + offsetX),
        y: Math.round(initY + offsetY),
      };
    }, 20); // 20ms 节流间隔

    const mouseup = () => {
      document.removeEventListener('mousemove', mousemove);
      document.removeEventListener('mouseup', mouseup);
      document.removeEventListener('mouseleave', mouseup);
      mousemove.cancel(); // 清除节流函数的残留调用
    };

    document.addEventListener('mousemove', mousemove);
    document.addEventListener('mouseup', mouseup);
    document.addEventListener('mouseleave', mouseup);
  };
</script>
<style lang="scss" scoped>
  .main-panel-all {
    height: 60px;
    position: relative;
  }
</style>
